import{Card,Form,Input,Button, message}from 'antd'
import "@/pages/login/index.scss"
import { useDispatch } from 'react-redux'
import { fetchLogin } from '@/store/modules/user'
import {  useNavigate } from 'react-router-dom'
function Login(){
   const dispatch=useDispatch()
   const navigate=useNavigate()
   async function onFinish(value){
    await dispatch(fetchLogin(value))
    //发送请求成功后跳转
    navigate('/')
    //提示登录成功信息
    message.success("登录成功")
   console.log(value)
   }
    return (
        <div className='background'>
   <Card className='loginCard' >
        {/* <div>登录</div> */}
        <Form 
        validateTrigger="onBlur"
        onFinish={onFinish}
        >
            <Form.Item         
            name="username"
            rules={[
                {
                    required:true,
                    message:"请输入用户名"      
                }
            ]}
            >
            <Input placeholder='用户名'></Input>
            </Form.Item>
            <Form.Item
            name="password"
            rules={[ {
                required:true,
                message:"请输入密码"
            }
        ]}
            >
            <Input placeholder='输入密码'></Input>
            </Form.Item>
            <Form.Item >
                <Button 
                className='loginButton'
                type='primary'
                htmlType='submit'
                size='large'
                >
             登录
                </Button>
            </Form.Item>
        </Form>
    </Card>
         </div>
    )
}
export default Login